<template>
  <div>
    <TopNav />
    <div class="pagecontent">
      <div class="content">
        <div class="banner">
          <Swiper :imagelist="banners" />
        </div>
        <div class="icon">
          <div class="content">
            <div class="top">
              <div class="title">
                <h3>尚品汇快报</h3>
                <span><a href="#">更多></a></span>
              </div>
              <hr />
              <ul>
                <li><strong>[特惠]</strong>备战开学季 全民半价购数码</li>
                <li><strong>[特惠]</strong>备战开学季 全民半价购数码</li>
                <li><strong>[特惠]</strong>备战开学季 全民半价购数码</li>
                <li><strong>[特惠]</strong>备战开学季 全民半价购数码</li>
                <li><strong>[特惠]</strong>备战开学季 全民半价购数码</li>
              </ul>
            </div>
            <table>
              <tbody>
                <tr>
                  <td><i class="huafei"></i>话费</td>
                  <td><i class="jipiao"></i> 机票</td>
                  <td><i class="dianyingpiao"></i> 电影票</td>
                  <td><i class="youxi"></i> 游戏</td>
                </tr>
                <tr>
                  <td><i class="caipiao"></i> 彩票</td>
                  <td><i class="jiayouzhan"></i> 加油站</td>
                  <td><i class="jiudian"></i> 酒店</td>
                  <td><i class="huochepiao"></i> 火车票</td>
                </tr>
                <tr>
                  <td><i class="chongchou"></i> 众筹</td>
                  <td><i class="licai"></i> 理财</td>
                  <td><i class="lipingka"></i> 礼品卡</td>
                  <td><i class="baitiao"></i> 白条</td>
                </tr>
              </tbody>
            </table>
          </div>
          <img
            class="image"
            src="../../assets/img/home/ad1.png"
            alt=""
            srcset=""
          />
        </div>
      </div>
    </div>
    <Recommend />
    <Tab />
    <TabContent />
    <Floor v-for="floor in floors" :key="floor.id" :floor="floor" />
  </div>
</template>

<script>
import TopNav from "../../components/TopNav";
import Recommend from "./Recommend";
import Tab from "./Tab";
import TabContent from "./TabContent";
import Floor from "./Floor";
import Swiper from "../../components/Swiper";

import { getBanner } from "../../api/banner";
import { getFloors } from "../../api/home";

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      floors: [],
    };
  },
  components: {
    TopNav,
    Swiper,
    Recommend,
    Tab,
    TabContent,
    Floor,
  },
  mounted() {
    getBanner()
      .then((res) => {
        this.banners = res;
      })
      .catch((err) => {
        console.log(err);
      });
    getFloors().then((res) => {
      this.floors = res;
      // console.log(res);
    });
  },
};
</script>

<style></style>
